<template>
  <div>
    <el-row type="flex" justify="center">
      <el-button type="primary" size="mini" @click="setOption">运行</el-button>
    </el-row>
    <div id="chart" :style="{width: '600px', height: '300px'}"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      chart: undefined,
      showLabel: true,
      option: {
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        yAxis: {
          type: 'value'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        series: [
          {
            name: '直接',
            type: 'bar',
            stack: 'total',
            data: [320, 302, 301, 334, 390, 330, 320],
            label:{
              show:true
            }
          },
          {
            name: '邮件广告',
            type: 'bar',
            stack: 'total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: 'Affiliate Ad',
            type: 'bar',
            stack: 'total',
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '电视广告',
            type: 'bar',
            stack: 'total',
            data: [0, 0, 201, 0, 0, 0, 0]
          },
          {
            // name: '搜索引擎',
            type: 'bar',
            stack: 'total',
            itemStyle: {
              color: '#5BC49F'
            },
            // label:{
            //   show: true
            // },
            data: [820, 832, 901, 934, 1290, 1330, 1320]
          }
        ]
      }
    }
  },
  components: {},
  computed: {},
  watch: {},
  mounted() {
    this.initialEcharts()
  },
  created() {
  },
  methods: {
    initialEcharts() {
      let dom = document.getElementById('chart');
      this.chart = this.$echarts.init(dom)
      this.setOption()
    },
    setOption() {
      this.chart.setOption(this.option)
    }
  }
}
</script>

